<template>
  <div class="bind-body bsb">
    <div class="bind-main por" :class="pageType">
      <img :class="'poa f' + (i + 1)" :key="i" v-for="(bg, i) in bgImgs" :src="bg" alt/>
      <div class="bind-title tac">
        <img class="vam title-img" src="../../images/center/Omit_left.png" alt/>
        <span>{{activeConfig.name}}</span>
        <img class="vam title-img" src="../../images/center/Omit_right.png" alt/>
        <p class="p" v-if="activeConfig.tips">{{activeConfig.tips}}</p>
      </div>
      <div class="bind-text" :class="pageType">
        <div class="li flex" v-for="(li, i) in activeConfig.uList" :key="i">
          <span class="">{{i + 1}}、</span>
          <span class="">{{li}}</span>
        </div>
      </div>
      <div class="bind-tip" v-if="activeConfig.remark">
        <h3 class="h3">注意：</h3>
        <p class="p">{{activeConfig.remark}}</p>
      </div>
      <div class="bind-btn tac" :class="pageType" @click="callback">{{activeConfig.btnText}}</div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Binding',
    data() {
      return {
        bgImgs: [
          require('../../images/center/flower01.png'),
          require('../../images/center/flower02.png'),
          require('../../images/center/flower03.png'),
          require('../../images/center/flower04.png'),
        ],
        pageType: '',
        pageConfig: {
          network: {
            title: '配置网络',
            name: '配置网络说明',
            btnText: '配置WIFI',
            tips: '配置设备上网前，请确认已完成以下准备',
            uList: [
              '确认机器人开机',
              '长按机器人配网按钮，进入配网模式',
              '听到提示后，点击公众号“配置网络”菜单',
              '进入配置WiFi信息，输入WiFi账号和密码，生成WiFi二维码',
              '将二维码放置在，机器人摄像头扫码区域内配置WiFi',
              '等待机器人语音提示网络配置成功',
            ],
          },
          device: {
            title: '绑定设备',
            name: '设备绑定流程',
            btnText: '扫描二维码',
            remark: '如已经绑定机器，再次扫码绑定其他机器人设备时，会解绑之前绑定的机器设备。',
            uList: [
              '打开机器里面的家长助手',
              '点击右上角的微信绑定',
              '进入二维码识别界面',
            ],
          },
        },
        activeConfig: null,
      };
    },
    watch: {
      '$route'(val) {
        this.initPage();
      },
    },
    created() {
      this.initPage();

    },
    methods: {
      initPage() {
        let {pageConfig} = this;
        let type = this.$route.params.type;
        if (!pageConfig[type]) return this.$router.go(-1);
        this.pageType = type;
        this.activeConfig = pageConfig[type];
        pageConfig[type] && (document.title = pageConfig[type].title);
        type === 'device' && this.util.setWxConfig(['scanQRCode']).catch(this.$err); // 扫码页面配置wx.config
      },
      callback() {
        let {pageType} = this;
        switch (pageType) {
          case 'network':
            // 配置网络时，跳转网络配置
            this.$router.replace({
              name: 'CreateWM',
            });
            break;
          case 'device':
            // 绑定设备时，扫码
            wx.scanQRCode({
              needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
              scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
              success(res) {
                let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                // this.$router.replace({
                //   name: 'EditUserInfo',
                //   params: {
                //     id: '25841',
                //   },
                // });
                // break;
              }
            });
        }
      },
    },
  };
</script>
<style lang="less" scoped>
  .bind-body {
    padding: 1.56rem 1.06rem 1.72rem;
    min-height: 100vh;
    background-color: #208fff;

    .bind-main {
      padding: 0 1.5rem 3.13rem;
      &.network {
        padding-bottom: 2.5rem;
      }
      background-color: #fff;
      .f1 {
        top: -.38rem;
        left: -1.06rem;
        width: 3.66rem;
      }
      .f2 {
        top: 4.16rem;
        right: -1.06rem;
        width: 1.94rem;
      }
      .f3 {
        bottom: -1rem;
        left: -1.06rem;
        width: 2.58rem;
      }
      .f4 {
        bottom: -1.72rem;
        width: 4.52rem;
        right: -1.06rem;
      }

      // width: 100vw;
      .bind-title {
        padding-top: 2.78rem;
        font-size: 1.31rem;
        font-weight: bold;
        line-height: 1rem;
        color: #333;
        .p {
          color: #208fff;
          font-size: .88rem;
          line-height: 1.2rem;
          margin-top: 1.25rem;
        }
        .title-img {
          width: 1.56rem;
        }
      }
      .bind-text {
        margin-top: 1.59rem;
        padding: 1.5rem 1.56rem;
        &.network {
          padding: 1.28rem 1.25rem 1.75rem;
          .li {
            line-height: 1.5;
          }
        }
        background-color: #e9f4ff;
        border-radius: .63rem;
        .li {
          font-size: 1rem;
          line-height: 1.88;
          color: #184169;
        }
      }
      .bind-tip {
        margin-top: 1.53rem;
        padding-left: .66rem;
        color: #ef7907;
        .h3 {
          margin-bottom: .69rem;
          font-size: 1rem;
          line-height: 1.2rem;
        }
        .p {
          font-size: .88rem;
          line-height: 1.13rem;
        }
      }
      .bind-btn {
        margin: 3.36rem auto 0;
        &.network {
          margin-top: 1.56rem;
        }
        width: 15rem;
        border-radius: 1.41rem;
        line-height: 2.81rem;
        background-image: linear-gradient(90deg, #00baff, #3275ff);
        color: #fff;
        &:hover {
          background-image: linear-gradient(90deg, #00a0dc, #1762f9);
        }
      }
    }
  }
</style>
